import { Wrapper } from './FileBlob.styled'

const Demo1 = () => {
  const onFileChange = async (e:any) => {
    console.log(e.target.files)     // FileList
    console.log(e.target.files[0])  // File
    console.log(await e.target.files[0].arrayBuffer())
  }
  return (
    <>
      <h1>input</h1>
      <input type="file" onChange={onFileChange} />
    </>
  )
}
const Demo2 = () => {
  const onDragOver = (e:any) => {
    e.preventDefault();
  }
  const onDropFile = async (e:any) => {
    e.preventDefault();
    console.log('files', e.dataTransfer.files)
    console.log(e.dataTransfer.files[0])
    console.log(await e.dataTransfer.files[0].arrayBuffer())
  }
  return (
    <>
      <h1>demo D&D</h1>
      <div className='demo2'
        onDragOver={onDragOver}
        onDrop={onDropFile}
        style={{
          height: '60px',
          width: '60px',
          border: '1px solid red'
        }}
      >
      </div>
    </>
  );
}
const Demo3  = () => {
  const onOpenFile = async () => {
    const pickerOpts = {
      types: [
        {
          description: 'Images',
          accept: {
            'image/*': ['.png', '.gif', '.jpeg', '.jpg']
          }
        },
      ],
      excludeAcceptAllOption: true,
      multiple: false
    };
    const [fileHandle] = await (window as any).showOpenFilePicker(pickerOpts);
    console.log(fileHandle)
    const f = await fileHandle.getFile()
    console.log(f)
    console.log(await f.arrayBuffer())
  }
  return (
    <>
      <h1>FileSystemHandle</h1>
      <button onClick={onOpenFile}>file picker</button>
    </>
  )
}
const Demo4 = () => {
  const onFetch = () => {
    fetch('/file.txt')
    .then((response) => {
      console.log(response)
      // return response.json()
      return response.blob()
    })
    .then(async (result: Blob) => {
      console.log(result)
      console.log(await result.text())
      console.log(await result.arrayBuffer())
    })
    .catch((err) => {
      console.error(err)
    })
  }
  return (
    <>
      <h1>fetch</h1>
      <button onClick={onFetch}>fetch</button>
    </>
  )
}

export const Demo = () => {
  return (
    <Wrapper>
      {/* <Demo1 /> */}
      {/* <Demo2 /> */}
      {/* <Demo3 /> */}
      <Demo4 />
    </Wrapper>
  );
}
